<!DOCTYPE html>
<html>
<head>
    <title>量化信号监控</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .connected { background: #d4edda; color: #155724; }
        .disconnected { background: #f8d7da; color: #721c24; }
        .signal { border: 1px solid #ddd; padding: 10px; margin: 5px 0; }
        .buy { border-left: 4px solid #28a745; }
        .sell { border-left: 4px solid #dc3545; }
    </style>
</head>
<body>
    <h1>量化信号监控面板</h1>
    
    <div class="status" id="connectionStatus">
        连接状态: 断开
    </div>
    
    <div>
        <button onclick="connectWebSocket()">连接</button>
        <button onclick="disconnectWebSocket()">断开</button>
        <button onclick="clearSignals()">清空记录</button>
    </div>
    
    <h3>实时信号</h3>
    <div id="signalList"></div>
    
    <h3>连接统计</h3>
    <div id="stats">
        <div>活跃连接: <span id="activeConnections">0</span></div>
        <div>总信号数: <span id="totalSignals">0</span></div>
    </div>

    <script>
        let ws = null;
        
        function connectWebSocket() {
            ws = new WebSocket(`ws://${window.location.host}/api/quant/ws`);
            
            ws.onopen = function() {
                document.getElementById('connectionStatus').className = 'status connected';
                document.getElementById('connectionStatus').textContent = '连接状态: 已连接';
                loadStats();
            };
            
            ws.onmessage = function(event) {
                const data = JSON.parse(event.data);
                handleMessage(data);
            };
            
            ws.onclose = function() {
                document.getElementById('connectionStatus').className = 'status disconnected';
                document.getElementById('connectionStatus').textContent = '连接状态: 断开';
            };
        }
        
        function handleMessage(data) {
            if (data.type === 'trading_signal') {
                addSignal(data);
            }
            loadStats();
        }
        
        function addSignal(signal) {
            const signalData = JSON.parse(signal.data);
            const signalElement = document.createElement('div');
            signalElement.className = `signal ${signalData.volume > 0 ? 'buy' : 'sell'}`;
            
            signalElement.innerHTML = `
                <strong>${signalData.volume > 0 ? '买入' : '卖出'} ${signalData.orderCode}</strong>
                <br>数量: ${Math.abs(signalData.volume)}
                <br>时间: ${new Date(signal.timestamp).toLocaleString()}
            `;
            
            document.getElementById('signalList').prepend(signalElement);
        }
        
        async function loadStats() {
            const response = await fetch('/api/quant/connections');
            const stats = await response.json();
            
            document.getElementById('activeConnections').textContent = stats.active_connections;
            document.getElementById('totalSignals').textContent = stats.total_signals;
        }
        
        function disconnectWebSocket() {
            if (ws) {
                ws.close();
            }
        }
        
        function clearSignals() {
            document.getElementById('signalList').innerHTML = '';
        }
        
        // 页面加载时自动连接
        connectWebSocket();
        setInterval(loadStats, 5000); // 每5秒更新统计
    </script>
</body>
</html>